import React, { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import http from '../../../model/http';
import code from "../../../model/code";
import './search.less';
import '../../../libs/font/iconfont.css'
import { SearchBar, Toast, Tabs, WingBlank, Drawer,Modal,Stepper, Accordion } from 'antd-mobile';  
import Header from '../../../components/header/Header'
function BillingSearch (){
    const history = useHistory();
    
    // 搜索结果
    const [countNum,setCountNum] = useState([])
    // 搜索的值
    const [searchVal, setSearchVal] = useState(history.location.state.searchVal)
    // 无数据的时候显示
    const [noDataShow,setNoDataShow] = useState(false)

    useEffect(async () => {  
        // console.log(history.location.state.searchVal)
        
        if(history.location.state != undefined){ 
            searchFunc(history.location.state.searchVal)
        }
         
    },[])
    // 搜索方法
    const searchFunc = async (val) => {
        const countData = await http.get('/goods/search',{
            search_content: val 
        })
        if(countData.code == 0){
            setCountNum(countData.data)
            let bool = countData.data.find(item => {
                return item.sums > 0
            })
            if(bool == undefined){
                setNoDataShow(true)
            }else{
                setNoDataShow(false)
            }

        }else{
            Toast.fail(countData.msg)
        }
    }
    // 搜索框点击回车
    const searchClick = (v) => {
        let searchVal = v.replace(/\s*/g,"")
        if(searchVal != ''){ 
            searchFunc(searchVal)
            setSearchVal(searchVal)
        }else{
            Toast.fail("请输入要查找的项目")
        }
        
    }
    // 点击搜索结果
    const searchBtn = (item) => {
        history.push('/billing/search/result',{
            searchVal: searchVal,
            btnType: item.type
        })
    }
    return (
        <div className="v-billing-search">
            <SearchBar placeholder="请输入要搜索的项目" 
            defaultValue={searchVal} 
            onSubmit={(v) => searchClick(v)}/>
            <div className="billing-search-content">
                {countNum.map((item,index) => (
                    <div onClick={() => searchBtn(item)}>
                        {item.sums > 0?
                            <div className={item.type == 1?'box':(item.type == 2?'box changpin':(item.type == 3?'taochang box':'box huodong'))}> 
                                <div className={`iconfont icon-${item.type == 1?'xiangmu':(item.type == 2?'chanpin':(item.type == 3?'qunfenggoumaitaocan':'huodong'))} icon-box-search`}></div>
                                <p><b># {searchVal} #</b>在
                                    {item.type == 1?'项目':(item.type == 2?'产品':(item.type == 3?'套餐':'活动'))}
                                中为您找到<div className="iconfont icon-youjiantou1 icon-box-search2"></div></p>
                                <span>{item.sums}条</span>
                            </div> 
                        :''}
                            
                    </div>
                ))}

                {noDataShow?<div className="no-data">无匹配搜索项目</div>:''}
                
            </div>
 
            <Header />
        </div>
    )
}
export default BillingSearch;






{/* <div className="box"> 
    <div className="iconfont icon-xiangmu icon-box-search"></div>
    <p><b># 项目 #</b>项目中匹配<div className="iconfont icon-youjiantou1 icon-box-search2"></div></p>
    <span>23条</span>
</div>
<div className="box changpin"> 
    <div className="iconfont icon-chanpin icon-box-search "></div>
    <p><b># 产品 #</b>产品中匹配 <div className="iconfont icon-youjiantou1 icon-box-search2"></div></p>
    <span>23条</span>
</div>
<div className="box taochang"> 
    <div className="iconfont icon-qunfenggoumaitaocan icon-box-search "></div>
    <p><b># 套餐 #</b>套餐中匹配 <div className="iconfont icon-youjiantou1 icon-box-search2"></div></p>
    <span>23条</span>
</div>
<div className="box huodong"> 
    <div className="iconfont icon-huodong icon-box-search "></div>
    <p><b># 活动 #</b>活动中匹配 <div className="iconfont icon-youjiantou1 icon-box-search2"></div></p>
    <span>23条</span>
</div> */}